<template>
	<view class="">
		<view class="form-title">经营信息</view>
		<u-form :model="form" ref="uForm" label-position="top" :label-style="labelStyle">
			<view class="u-p-x-30">
				<u-form-item label="经营类型（场景类型）" prop="type">
					<u-radio-group v-model="form.type" @change="changeType">
						<u-radio :name="1" active-color="#FE572A"> 线上商户 </u-radio>
						<u-radio :name="2" active-color="#FE572A"> 线下商户 </u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item :label="form.type == 1 ? '商户分类（线上）' : '商户分类（线下）'" prop="category_name">
            <view style="width: 100%;" @click="show = true">
					    <u-input style="pointer-events: none" v-model="form.category_name" type="select" />
            </view>
				</u-form-item>
				<u-form-item label="经营类型" prop="busi_type">
					<u-radio-group v-model="form.busi_type">
						<u-radio :name="1" active-color="#FE572A"> 实体 </u-radio>
						<u-radio :name="2" active-color="#FE572A"> 虚拟 </u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item label="商户名称" prop="store_name">
					<u-input v-model="form.store_name" placeholder="请填写与营业执照相符的名称" />
				</u-form-item>
				<u-form-item label="商户简称" prop="short_name">
					<u-input v-model="form.short_name" placeholder="请填写商户简称" />
				</u-form-item>
				<u-form-item label="商家logo" prop="logo_image">
					<u-upload @on-choose-complete="uploadSuccess" index="logo_image"
						:file-list="log.logo_image ? [{url:log.logo_image}] : []" ref="uUpload1" max-count="1"
						:max-size="2 * 1024 * 1024" :show-tips="false" @on-oversize="oversize" width="150"
						height="150"></u-upload>
				</u-form-item>
				<u-form-item label="商户简介" prop="store_abstract">
					<view class="flex-1 u-p-x-5" style="background-color: #f5f5f5;">
						<u-input v-model="form.store_abstract" maxlength="100" type="textarea" placeholder="请填写商户简介" />
					</view>
				</u-form-item>
				<u-form-item label="主营项目" prop="store_zy">
					<view class="flex-1 u-p-x-5" style="background-color: #f5f5f5;">
						<u-input v-model="form.store_zy" maxlength="100" type="textarea" placeholder="请填写主营项目" />
					</view>
				</u-form-item>
				<u-form-item label="所属行业(mcc)" prop="mcc_name">
          <view style="width: 100%;" @click="mccShow = true">
            <u-input style="pointer-events: none" v-model="form.mcc_name" type="select" />
          </view>
				</u-form-item>
				<u-form-item label="经营省市区" prop="region">
          <view style="width: 100%;" @click="showRegion = true">
					  <u-input style="pointer-events: none" v-model="form.region" type="select" />
          </view>
				</u-form-item>
				<u-form-item label="详细地址" prop="address">
					<u-input v-model="form.address" type="textarea" height="50" placeholder="请填写商户详细地址" />
				</u-form-item>
				<u-form-item label="客服电话" prop="service_phone">
					<u-input v-model="form.service_phone" placeholder="请填写客服电话" />
				</u-form-item>
				<u-form-item label="店铺门头照" prop="face_image">
					<u-upload @on-choose-complete="uploadSuccess" index="face_image"
						:file-list="log.face_image ? [{url:log.face_image}] : []" ref="uUpload2" max-count="1"
						:max-size="2 * 1024 * 1024" :show-tips="false" @on-oversize="oversize" width="150"
						height="150"></u-upload>
				</u-form-item>
				<u-form-item label="店铺内景/工作区域照" prop="inside_images" labelWidth="80">
					<u-upload @on-choose-complete="uploadSuccess" index="inside_images"
						:file-list="log.inside_images ? [{url:log.inside_images[0]},{url:log.inside_images[1]}] : []"
						ref="uUpload3" max-count="2" :max-size="2 * 1024 * 1024" :show-tips="false"
						@on-oversize="oversize" width="150" height="150"></u-upload>
				</u-form-item>
				<u-form-item label="店铺收银台/公司前台照" prop="cashier_image" labelWidth="80">
					<u-upload @on-choose-complete="uploadSuccess" index="cashier_image"
						:file-list="log.cashier_image ? [{url:log.cashier_image}] : []" ref="uUpload4" max-count="1"
						:max-size="2 * 1024 * 1024" :show-tips="false" @on-oversize="oversize" width="150"
						height="150"></u-upload>
				</u-form-item>
			</view>
		</u-form>
		<u-select v-model="show" :list="typeList" label-name="name" value-name="id" @confirm="confirm"></u-select>
		<u-picker v-model="mccShow" :range="[mccList,mccList2,mccList3]" range-key="name" mode="multiSelector"
			:default-selector="mccSelector" @confirm="mccConfirm" @columnchange="mccColumnchange"></u-picker>
		<u-picker v-model="showRegion" mode="region" @confirm="confirmRegion"></u-picker>
		<view class="bg-white">
			<view class="flex align-center justify-evenly u-p-30">
				<dy-button width="250rpx" size="default" @click="submit">下一步</dy-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		SupplierCenterApi
	} from '@/api/serves.js'
	import {
		mapActions
	} from 'vuex'
	export default {
		name: 'Step1',

		data() {
			return {
				show: false,
				mccShow: false,
				showRegion: false,
				mccList: [],
				mccList2: [],
				mccList3: [],
				mccSelector: [0, 0, 0],
				typeList: [],
				form: {
					type: 1,
					category_id: '',
					category_name: '',
					busi_type: 1,
					store_name: '',
					short_name: '',
					logo_image: '',
					store_abstract: '',
					store_zy: '',
					mcc_name: '',
					mcc: '',
					region: '',
					address: '',
					service_phone: '',
					face_image: '',
					inside_images: '',
					cashier_image: '',
				},
				rules: {
					store_name: [{
						required: true,
						message: '请输入商户名称',
						trigger: ['blur', 'change']
					}],
					short_name: [{
						required: true,
						message: '请输入商户简称',
						trigger: ['blur', 'change']
					}],
					store_abstract: [{
						required: true,
						message: '请输入商户简介',
						trigger: ['blur', 'change']
					}],
					store_zy: [{
						required: true,
						message: '请输入主营项目',
						trigger: ['blur', 'change']
					}],
					service_phone: [{
						required: true,
						message: '请输入客服电话',
						trigger: ['blur', 'change']
					}],
				},
				labelStyle: {
					fontSize: '28rpx',
					fontWeight: 'bold',
				},
				log: {}
			}
		},
		props: {
			logData: {
				type: Object,
				default () {
					return {}
				}
			}
		},
		async mounted() {
			this.$refs.uForm.setRules(this.rules);
			this._merchCategorys()
			this._getMccList()
			this._applyIndex()
		},
		methods: {
			...mapActions({
				upload: 'user/upload'
			}),
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						let files1 = this.$refs.uUpload1.lists
						if (!files1.length) return this.$u.toast('请上传商家LOGO', 2000)
						let files2 = this.$refs.uUpload2.lists
						if (!files2.length) return this.$u.toast('请上传商家门面图片', 2000)
						let files3 = this.$refs.uUpload3.lists
						if (files3.length !== 2) return this.$u.toast('请上传2张商家店内图片', 2000)
						let files4 = this.$refs.uUpload4.lists
						if (!files4.length) return this.$u.toast('请上传店铺收银台或公司前台照', 2000)
						uni.setStorageSync('applyForm_1', this.form)
						this.$emit('submit', this.form);

					}
				});
			},
			_getMccList() {
				SupplierCenterApi.getMccList().then(res => {
					if (res.code == 1) {
						this.mccList = res.data
						SupplierCenterApi.getMccList({
							level: 2,
							p_id: this.mccList[0].id
						}).then(res1 => {
							if (res1.code == 1) {
								this.mccList2 = res1.data
								SupplierCenterApi.getMccList({
									level: 3,
									c_id: this.mccList2[0].id
								}).then(res2 => {
									if (res2.code == 1) {
										this.mccList3 = res2.data
									}
								})
							}
						})
					}
				})
			},
			mccConfirm(data) {
				let mcc_name = this.mccList3[data[2]].name
				let mcc = this.mccList3[data[2]].code
				this.form.mcc_name = mcc_name
				this.form.mcc = mcc
			},
			mccColumnchange(data) {
				let {
					column,
					index
				} = data
				this.mccSelector[column] = index
				if (column == 0) {
					SupplierCenterApi.getMccList({
						level: 2,
						p_id: this.mccList[index].id
					}).then(res1 => {
						if (res1.code == 1) {
							this.mccList2 = res1.data
							SupplierCenterApi.getMccList({
								level: 3,
								c_id: this.mccList2[0].id
							}).then(res2 => {
								if (res2.code == 1) {
									this.mccList3 = res2.data
								}
							})
						}
					})
				} else if (column == 1) {
					SupplierCenterApi.getMccList({
						level: 3,
						c_id: this.mccList2[index].id
					}).then(res => {
						if (res.code == 1) {
							this.mccList3 = res.data
						}
					})
				}
			},
			confirm(data) {
				this.form.category_name = data[0].label
				this.form.category_id = data[0].value
			},
			confirmRegion(e) {
				this.form.region = `${e.province.label},${e.city.label},${e.area.label}`
			},
			_applyIndex() {
				if (JSON.stringify(this.logData) === '{}') {
					let applyForm = uni.getStorageSync('applyForm_1')
					if (applyForm) {
						Object.keys(this.form).forEach(key => {
							if (applyForm.hasOwnProperty(key)) {
								this.form[key] = applyForm[key];
							}
						})
						if (typeof applyForm.inside_images === 'string') {
							applyForm.inside_images = applyForm.inside_images.split(',');
						}
						this.log = applyForm
					}
				} else {

					Object.keys(this.form).forEach(key => {
						if (this.logData.hasOwnProperty(key)) {
							this.form[key] = this.logData[key];
						}
					})
					this.form.mcc_name = this.logData.mcc_text
					this.form.category_name = this.logData.category_text
					this.form.region = this.logData.region_text
					this.log = this.logData
				}
			},
			_merchCategorys() {
				this.$ShowLoading()
				let api = this.form.type === 1 ? 'getMerchCategoryList0' : 'getMerchCategoryList'
				SupplierCenterApi[api]().then(res => {
					this.$HideLoading()
					if (res.code == 1) {
						this.typeList = res.data.data
					}
				})
			},
			changeType(e) {
				this._merchCategorys()
			},
			uploadSuccess(files, name) {
				this.upload(files).then(res => {
					if (res.length > 0) {
						if (name === 'inside_images') {
							let arr = this.form[name] ? this.form[name].split(',') : []
							arr.push(this.$_BASE_IMG_API + res[0])
							this.form[name] = arr.join(',')
						} else {
							this.form[name] = this.$_BASE_IMG_API + res[0]
						}
					}
				})
			},
			oversize(file, lists, name) {
				if (file.size > 2 * 1024 * 1024) {
					this.$u.toast('上传文件不能超过2M')
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.form-title {
		font-size: 36rpx;
		font-weight: bold;
		margin: 10rpx 30rpx;
		padding-bottom: 20rpx;
		border-bottom: 6rpx solid #c7c7c7;
	}
</style>